Skip to content

헤더 컴포넌트 개발#50

Merged
HWAN0218 merged 1 commit into
mainfrom
feature/team-header
Feb 10, 2026
Merged

헤더 컴포넌트 개발#50
HWAN0218 merged 1 commit into
mainfrom
feature/team-header

Conversation

@HWAN0218

@HWAN0218 HWAN0218 commented Feb 10, 2026

Copy link
Copy Markdown
Contributor

Summary

스크린샷 2026-02-10 오후 5 26 37 스크린샷 2026-02-10 오후 5 27 01 스크린샷 2026-02-10 오후 5 27 29
  • 이 PR에서 변경한 내용 한 줄 요약

#49

Scope

  • 포함

  • 특이사항
    사진들은 캡처 한거라 이상한 선 같은건 무시하시면 됩니다

@HWAN0218 HWAN0218 added this to the 컴포넌트 milestone Feb 10, 2026
@HWAN0218 HWAN0218 requested review from a team, Jieunsse, jungwon123 and yooolleee February 10, 2026 08:28
@HWAN0218 HWAN0218 self-assigned this Feb 10, 2026
@HWAN0218 HWAN0218 added the 기능추가 기능개발 및 추가할 때 사용해주세요. label Feb 10, 2026
@HWAN0218 HWAN0218 added this to workers Feb 10, 2026
@github-project-automation github-project-automation Bot moved this to 개발 대기중 in workers Feb 10, 2026
@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @HWAN0218, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 팀 정보를 표시하고 설정 페이지로의 접근을 제공하는 새로운 TeamHeader 컴포넌트를 도입합니다. 이 컴포넌트는 'list'와 'team' 두 가지 시각적 변형을 지원하며, 팀 이름, 멤버 수, 그리고 최대 세 명의 멤버 아바타를 유연하게 표시합니다. 또한, 다양한 화면 크기에 최적화된 반응형 디자인을 통해 사용자 경험을 향상시키는 것을 목표로 합니다.

Highlights

  • 새로운 컴포넌트 개발: 팀 정보를 표시하는 TeamHeader 컴포넌트가 새로 개발되었습니다.
  • 다양한 변형 지원: 헤더 컴포넌트는 'list'와 'team' 두 가지 시각적 변형을 지원하여 유연하게 사용될 수 있습니다.
  • 팀 정보 표시: 팀 이름, 멤버 수, 그리고 최대 세 명의 멤버 아바타 이미지를 표시하는 기능을 포함합니다.
  • 반응형 디자인 적용: 다양한 화면 크기에 맞춰 레이아웃과 설정 아이콘이 변경되는 반응형 디자인이 적용되었습니다.
  • 설정 페이지 링크: 팀 설정 페이지로 이동할 수 있는 링크가 헤더에 포함되어 있습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/assets/icons/img/thumbnail_team.svg
    • 새로운 SVG 아이콘이 추가되었습니다.
  • src/components/team-header/TeamHeader.module.css
    • TeamHeader 컴포넌트의 스타일링을 위한 CSS 모듈이 추가되었으며, 반응형 디자인을 위한 미디어 쿼리가 포함되었습니다.
  • src/components/team-header/TeamHeader.tsx
    • TeamHeader React 컴포넌트가 구현되었습니다. 이 컴포넌트는 variant, teamName, memberCount, memberImageUrls, settingsHref 등의 props를 받아 팀 헤더를 렌더링합니다.
  • src/components/team-header/index.ts
    • TeamHeader 컴포넌트와 관련 타입(TeamHeaderProps, TeamHeaderVariant)을 내보내는 인덱스 파일이 추가되었습니다.
Activity
  • 현재까지 이 PR에 대한 활동은 없습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@HWAN0218 HWAN0218 moved this from 개발 대기중 to 개발 진행중 in workers Feb 10, 2026
@HWAN0218 HWAN0218 moved this from 개발 진행중 to PR 리뷰중 in workers Feb 10, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

안녕하세요. TeamHeader 컴포넌트 개발 PR 리뷰입니다. 전반적으로 컴포넌트 구조, 반응형 디자인, 그리고 접근성 고려 사항들이 잘 구현되어 있습니다. 코드 품질이 높고 명확하게 작성되었습니다. 한 가지 개선점을 제안 드립니다. 자세한 내용은 개별 코멘트를 확인해주세요.

className={styles.avatar}
style={{ zIndex: visibleAvatars.length - idx }}
>
<img src={url} alt="" />

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

성능 최적화와 일관성을 위해 next/imageImage 컴포넌트를 사용하는 것을 권장합니다. next/image는 이미지 크기 최적화, 지연 로딩 등의 이점을 제공합니다. 다른 SVG 아이콘들은 이미 Image 컴포넌트를 사용하고 있으므로, 아바타 이미지도 통일하는 것이 좋습니다.

widthheight는 CSS에 정의된 대로 24로 설정할 수 있습니다. 외부 이미지 URL을 사용하는 경우 next.config.js 파일에 해당 도메인을 추가해야 할 수 있습니다.

Suggested change
<img src={url} alt="" />
<Image src={url} alt="" width={24} height={24} />

@HWAN0218 HWAN0218 merged commit a224624 into main Feb 10, 2026
1 check passed
@github-project-automation github-project-automation Bot moved this from PR 리뷰중 to 개발 완료 in workers Feb 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

기능추가 기능개발 및 추가할 때 사용해주세요.

Projects

Status: 개발 완료

Development

Successfully merging this pull request may close these issues.

2 participants